.input { z-index: 100; }
.input.upload { 
    /* este será o tamanho do botão */
    /* esse wrapper vai especificar a área clicável */
    width: auto; 
    border: #CCCCCC;
/*    height: 30px; */
    overflow: hidden;
    /* ele deve ter posição relativa */
    position: relative;
    /* consistimos os elementos (podemos usar a ou div)*/
    display: block; 
/*    text-decoration: none; */
}
.input.upload input {
    /* tamanho do botão de upload */
    /* como não é possível personarlizar as dimensões do botão */
    /* do input file especificamos o tamanho do botão através */
    /* da font */
    font-size: 20px;
    /* escondemos o botão através da propriedade opacity, assim */
    /* manteremos o botão clicável apesar de oculto */
    opacity: 0;
    filter: alpha(opacity=0);
    /* o input deve ter posição absoluta para se sobrepor ao */
    /* botão fake */
    position: absolute;
    /* setamos a ordem da sobreposição */
    z-index: 102;
    /* colocamos o botão no topo do wrapper (pai) */
    top: 0;
    /* para funcionar no IE, devemos posicionar o input file */
    /* à direita */
    /* assim o botão ficará posicionado no local de clique */
    right: 0;
    /* personalizamos o ponteiro */
    cursor: pointer;
}
.input.upload button { 
    /* as medidas do botão seguem o wrapper (pai) */
    width: 100%; height: 100%; display: block;
    /* personalizamos o nosso botão fake */
    background: #ADA8A4; color: white; border-radius: 5px; 
    padding: 5px;
    /* setamos a ordem de sobreposição, aqui deve ser menor que */
    /* o input file */
    z-index: 101;
}
/* Aqui temos o uso do :hover para melhorar a personalização */
/* do botão. */
/* Para compatibilidade cross-browser, usamos a tag <a> no html */
/* que permite capturar o evento :hover em browsers antigo */
.input.upload:hover button {
    background: #FF8484; color: #333;
}